<template>
  <div>
    <el-form ref="formRef" :model="form_data" label-width="100px" :rules="rules">
      
      <el-form-item v-for="item in form_items" :key="item.prop" :prop="item.prop" :label="item.label">
        
        <!--单文本输入框-->
        <el-input
          v-model="form_data[item.prop]"
          v-if="item.type === 'input'"
          :type="item.input_type || 'text'"
          :size="item.size"
          :class="item.class"
          :placeholder="item.placeholder"
          :suffix-icon="item.sufIcon"
          :prefix-icon="item.preIcon"
          :maxlength="item.maxlength"
          :show-word-limit="item.show_word_limit"
          :disabled="item.disabled"
          :clearable="item.clearable"></el-input>
        
        <!--数字框-->
        <el-input-number
          v-if="item.type === 'input-number'"
          v-model="form_data[item.prop]"
          :min="item.min"
          :max="item.max"
          :precision="item.precision || 0"
          :size="item.size"
          :controls-position="item.position || ''"
          :step="item.step || 1"
          :disabled="item.disabled"
          :class="item.class"
          :step-strictly="item.strictly"
          :placeholder="item.placeholder"
          :label="item.label"></el-input-number>
        
        <!--单选按钮组-->
        <template v-if="item.type === 'radio'">
          <el-radio-group v-model="form_data[item.prop]">
            <el-radio
              v-for="radio in item.radios"
              :key="radio.value"
              :label="radio.value"
              :disabled="radio.disabled"
            >{{radio.label}}</el-radio>
          </el-radio-group>
        </template>
        
        <!--select选择框-->
        <el-select
          v-if="item.type === 'select'"
          v-model="form_data[item.prop]"
          :clearable="item.clearable"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          :size="item.size"
          :class="item.class"
          :filterable="item.filterable"
        >
          <el-option
            v-for="option in item.options"
            :key="option[item.option_value]"
            :label="option[item.option_label]"
            :value="option[item.option_value]">
          </el-option>
        </el-select>
        
        <!--级联选择器-->
        <el-cascader
          v-if="item.type === 'cascader'"
          v-model="form_data[item.prop]"
          :options="item.options"
          :props="item.props || {value: 'value',label: 'label'}"
          :separator="item.separator || '/'"
          :clearable="item.clearable"
          :placeholder="item.placeholder"
          :size="item.size"
          :class="item.class"
          :filterable="item.filterable"
        ></el-cascader>
        
        <!--复选框-->
        <el-checkbox-group v-if="item.type === 'checkbox'" v-model="form_data[item.prop]"><!--这里的prop必须为数组-->
          <el-checkbox
            v-for="option in item.options"
            :key="option.value"
            :label="option.value"
            :disabled="option.disabled"
          >{{option.label}}
          </el-checkbox>
        </el-checkbox-group>
  
        <!--v-slot-->
        <slot v-if="item.type === 'slot'" :name="item.slotName" :formData="form_data"></slot>
      
      </el-form-item>
    
    </el-form>
    
    <!--底部按钮组-->
    <div v-if="form_footer" :class="form_footer.class || 'text-center'">
      <el-button
        v-for="(item,i) in form_footer['buttons']"
        :key="i" :type="item.button_type" :size="item.size"
        :plain="item.plain"
        :icon="item.icon"
        :class="item.class"
        :disabled="item.disabled"
        :loading="item.loading"
        @click="onClick(item)"
      >{{item.label}}
      </el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MyForm",
    props: {
      form: {
        type: Object, default: () => {
        }
      }
    },
    data() {
      return {
        form_items: [],
        form_data: {},
        form_footer: null,
        rules: {},
        original_data: {}
      }
    },
    created() {
      this.form_items = this.form.form_items || []
      this.form_data = this.form.form_data || {}
      this.original_data = JSON.parse(JSON.stringify(this.form.form_data || {}))
      this.form_footer = this.form.form_footer || null
      this.rules = this.form.rules || {}
      console.log(this.rules)
    },
    methods: {
      onClick(item) {
        if (item.type === 'submit') {
          this.$refs.formRef.validate(valid => {
            if (!valid) return
            item.callback && item.callback(this.form_data)
          })
          
        }
        if (item.type === 'reset') {
          this.form_data = this.original_data
        }
        if (item.type === 'cancel') {
          item.callback && item.callback()
        }
      }
    }
  }
</script>

<style scoped>

</style>